<template>
  <div>
    <!--搜索框-->
    <div >
      <el-form style="margin-top: 7px;" :inline="true"  class="demo-form-inline">
        <el-form-item >
          <el-input  style="background-color:transparent;border:5px;" v-model="likeusername"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent;  color: black"  @click="likeuserByname">
            搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容-->
   <div>
     <el-table :data="tableData" border style="width: 100%">
       <el-table-column fixed  label="序号" width="50">
         <template slot-scope="scope">{{ scope.$index+1}}</template>
       </el-table-column>
       <el-table-column fixed  label="账号" width="150">
         <template slot-scope="scope">{{ scope.row.sno }}</template>
       </el-table-column>
       <el-table-column prop="username"label="姓名" width="120">
       </el-table-column>
       <el-table-column prop="sex" label="性别" width="60">
       </el-table-column>
       <el-table-column prop="sdept" label="专业" width="120">
       </el-table-column>
       <el-table-column   prop="status" label="权限" width="100">
         <template slot-scope="scope" v-if="scope.row.status==1">普通用户</template>
         <!-- <template slot-scope="scope" v-else-if="scope.row.status==2">教师用户</template>
          <template slot-scope="scope" v-else-if="scope.row.status==3">管理员</template>-->
       </el-table-column>
       <el-table-column prop="email" label="邮箱" width="200">
       </el-table-column>
       <el-table-column prop="articlenum" label="发帖数" width="80">
       </el-table-column>
       <el-table-column prop="replynum" label="回复数" width="80">
       </el-table-column>
       <el-table-column label="操作" width="100">
         <template slot-scope="scope" >
           <el-button class="idStatus"
                      size="mini"
                      type="text"
                      color="red"
                      @click="deleteuser(scope.$index, scope.row.sno)">删除</el-button>
           <el-button class="idStatus"
                      size="mini"
                      type="text"
                      color="red"
                      @click="useredit(scope.$index, scope.row)">修改</el-button>
         </template>

       </el-table-column>
     </el-table>
     <!--分页操作-->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="queryInfo.page"
       :page-sizes="[5]"
       :page-size="queryInfo.limit"
       layout=" sizes, prev, pager, next, jumper"
       :total="queryInfo.total">
     </el-pagination>
   </div>

    <!--修改模态框-->
    <el-dialog
      title="个人信息修改"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :label-position="labePositioln" label-width="100px" :model="Info" ref="ruleForm">

        <el-form-item label="姓名">
          <el-input v-model="Info.username"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="Info.sex"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="Info.status" placeholder="请选择权限">
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="Info.sdept"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="modify ('ruleForm')" >确 定</el-button>
    </span>

    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
         /* {
          sno: '2016-05-02',
          username: '王小虎',
          sex: '上海',
          sdept: '普陀区',
          status: '上海市普陀区金沙江路 1518 弄',
          email: 200333
        },
          {
          sno: '2016-05-02',
          username: '王小虎',
          sex: '上海',
          sdept: '普陀区',
          status: '上海市普陀区金沙江路 1518 弄',
          email: 200333
        },
          {
          sno: '2016-05-02',
          username: '王小虎',
          sex: '上海',
          sdept: '普陀区',
          status: '上海市普陀区金沙江路 1518 弄',
          email: 200333
        }, {
          sno: '2016-05-02',
          username: '王小虎',
          sex: '上海',
          sdept: '普陀区',
          status: '上海市普陀区金沙江路 1518 弄',
          email: 200333
        }*/
        ],
        queryInfo:{
          query:'',
          //当前页数
          page:'1',
          //每页显示多少条
          limit:'5',
          total:'',
        },
        dialogVisible: false,
        Info: {
          sno:"",
          username:"",
          sex:"",
          sdept:"",
          status:"",
        },
        likeusername:'',
      }
    },
    created() {
      this.getAll();
    },
    methods: {
      /*模糊查询*/
      likeuserByname(){
        // alert(this.likeusername);
      },
      //修改模态框
      modify: function () {
        // alert("已进入操作");
        // console.log(this.Info);
        this.$http
          .post('/user/edituser', {
            'sno': this.Info.sno,
            'username': this.Info.username,
            'sex': this.Info.sex,
            'status': this.Info.status,
            'sdept': this.Info.sdept,
          })
          .then(res =>{
            if(res.data.statusCode==200) {
              this.$router.go(0);
              this.$message("操作成功!!");
            }
          })
          .catch(error =>{
            this.$message("操作失败!!")
          })
        this.dialogVisible = false;
      },
      /*用户修改*/
      useredit(index,user){
        // console.log(user);
        this.Info.sno=user.sno;
        this.Info.username = user.username;
        this.Info.sex = user.sex ;
        this.Info.status= user.status ;
        this.Info.sdept = user.sdept;

        this.dialogVisible = true;
      },
      /*删除用户*/
      deleteuser(index ,sno){
        // alert(sno);

        this.$http
        .get("user/deleteuser",{params:{sno:sno}})
        .then(res=>{
          if(res.data.statusCode == 200){
            this.$message({message: '删除成功',type: 'success'});
            this.$router.go(0);
          }

        })
        .catch(error =>{
          this.$message('删除失败');
        })
      },
      /*查询所有用户信息*/
      getAll(){
        // alert("查询所有用户信息");
        this.$http
          .get('/user/allusers',{params:{page:this.queryInfo.page,limit:this.queryInfo.limit,status:1}})
          .then(res => {
            if (res.data.statusCode == 200) {
              // alert("查询成功");
              this.tableData = res.data.data.list;
              this.queryInfo.total=res.data.total;
            }
          })
          .catch(error => {
            this.$message(error)
          })
      },
      /*模态框的方法*/
      handleinsert() {

        this.dialogVisible = true;

      },
      handleClose(done) {
        alert(done);
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      handleClick(row) {
        console.log(row);
      },
      /*分页方法*/
      handleSizeChange(newSize){
        // alert("每页显示条数的更新"+newSize)
        this.queryInfo.limit=newSize
        this.getAll()
        //console.log(newSize)
      },
      handleCurrentChange(newPage){
        //alert("页码的更新"+newPage)
        this.queryInfo.page=newPage
        this.getAll();
        //console.log(newPage)
      }
    },
  }
</script>
<style>
  .el-form-item {
    margin-bottom: 5px;
  }
</style>
